<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .mainBorder{
				border: 1px solid #ccc;
				margin: 2px 0px;
			}
			
			.innerBorder {
				border: 1px solid #ccc;
				margin: 2px;
			}
			.kkk{
                border:1px solid #ccc;
                margin-top: 30px;

            }
			header {
				order: 0;
				height: 80px;
            }
            header1{
                order:0;
                height: 50px;
            }
			
			section {
				order: 1;
				flex-grow: 1;
				display: flex;
				flex-direction: row;
            }
			
			footer {
				order: 2;
				height: 50px;
			}
			
			nav {
                width: 180px;
                height: 700px;
            }
            nav1{
                width: 180px;
                height: 700px;
              
            }
			nav2{
                width: 178px;
                height: 344px;
            }
			article {
				width: 100%
            }
            gege{
               height: 20px;
               width: 25%;
            }
            
    </style>
</head>
<body>
        <header class="mainBorder">logo</header>
        <header1 class="mainBorder">
            <section>
                <gege class="kkk">主页</gege>
                <gege class="kkk">写博客</gege>
                <gege class="kkk">文章分类</gege>
                <gege class="kkk">设置</gege>
        </header1>
    </section>
		<section>
			<nav class="innerBorder">文章分类</nav>
            <article class="innerBorder">主体</article>
            <nav1 class="innerBorder">
                <section>
                    <nav2 class="innerBorder">排行榜</nav2>    
                </section> 
                <section>
                <nav2 class="innerBorder">点赞榜</nav2> 
                </section>             
            </nav1>
		</section>
		<footer class="mainBorder">作者信息</footer>
</body>
</html>